import React from 'react';
import ReactDOM from 'react-dom';
import { createStore } from 'redux'

 
import Header from './javascripts/ui/header';
import FolderContainer from './javascripts/ui/folder-container';
import PreviewContainer from './javascripts/ui/preview-container';
import Edit from './javascripts/ui/edit';
import NewFolder from './javascripts/ui/new-folder';
import NewPreview from './javascripts/ui/new-preview';
import DeleteFolder from './javascripts/ui/delete-folder';
import DeletePreview from './javascripts/ui/detele-preview';
import RenameFolder from './javascripts/ui/rename-folder';
import RenamePreview from './javascripts/ui/rename-preview';

import { Provider } from 'react-redux';
import store from './store';

const render = () => { 
    ReactDOM.render((
        <Provider store={store}>
            <div className="layout-section">
            <div className="backcover"></div>
            <Header />
            <div id="container">
                <FolderContainer/>
                <PreviewContainer/>
                <Edit />
                <NewFolder />
                <NewPreview />
                <DeleteFolder />
                <DeletePreview />
                <RenameFolder />
                <RenamePreview />
            </div>
            </div>   
        </Provider>
    ), document.getElementById('root'));
}

render();

store.subscribe(render);

$(document).ready(function(){
    $('#root').click(function(){
        $('#preview-operation').hide();
        $('#folder-operation').hide();
    })

})